
import React from 'react';
import { Alert } from 'antd';
import cass from 'classnames';
import IF from '../If';
import './play.less';
import s from './index.module.less';

export function AutoplayText({ text, autoplay }) {
    return (
        <div className={s.wrapper}>
            {autoplay ? (
                <div className={s.innerWrapper}>
                    <span className='auto-text-first'>{text}</span>
                    <span className='auto-text-second'>{text}</span>
                </div>
            ) : (
                    <div className={s.textWrapper}>
                        {text}
                    </div>
                )}
        </div>
    )
}

export default function BannerTips({ show, autoplay, type, message, tips }) {
    return (
        <IF condition={show}>
            <div className={cass(s.banner, { [s.center]: !tips })}>
                <Alert
                    type={type}
                    message={(
                        <div className={s.alertMessage}>
                            {message ? (<div className={s.message}>{message}</div>) : null}
                            {tips ? (
                                <div className={s.tips}>
                                    <AutoplayText autoplay={autoplay} text={tips} />
                                </div>
                            ) : null}
                        </div>
                    )}
                    banner
                />
            </div>
        </IF>
    )
}